import React, { useState, useEffect } from 'react'
import { MemberEntity } from '../model/member'
import { getMembersCollection } from '../api/memberApi'

const useMemberCollection = () => {
    const [memberCollection, setMemberCollection] =
        useState<MemberEntity[]>([])

    const loadMemberCollection = () => {
        getMembersCollection()
            .then(
                memberCollection => setMemberCollection(
                    memberCollection
                )
            )
    }
    return {
        memberCollection,
        loadMemberCollection
    }
}

const MemberTableComponent: React.FC<{}> = () => {
    // 自定义hooks
    const { memberCollection, loadMemberCollection } =
        useMemberCollection();

    useEffect(() => {
        loadMemberCollection();
    }, [])

    return (
        <>
            <table>
                <thead>
                    <tr>
                        <th>Avatar</th>
                        <th>Id</th>
                        <th>Name</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        memberCollection.map(member => (
                            <MemberRow key={member.id}
                                member={member} />
                        ))
                    }
                </tbody>
            </table>
        </>
    )
}

const MemberRow = ({ member }: { member: MemberEntity }) => (
    <tr>
        <td>
            <img
                src={member.avatar_url}
                style={{ maxWidth: "10rem" }}
                alt=""
            />
        </td>
        <td>
            <span>{member.id}</span>
        </td>
        <td>
            <span>{member.login}</span>
        </td>
    </tr>
)

export default MemberTableComponent